
<template>
  <div>
    <groupItem v-for="(item,index) in data" :key="index">
        <div class="list" @click="handleToggleShow(item.id)" :style="{paddingLeft:`${depth * 30 + 10}px`}">
          <div>
            <el-button type="primary" plain  size="small" :class="{'isfrist':item.pid != 0}">{{item.text}}</el-button>
            <span v-if="item.text === '未分组'">（系统目录不能修改）</span>
          </div>
          <div class="rightBtns">
            <el-button size="small" @click.stop="addChirlden(item.id)" v-if="jurisdiction.customer_createGroup && type !== 'unbanked' && depth < 2">创建子分组</el-button>
            <div class="iconBtns">

              <el-tooltip class="item" effect="dark" content="编辑" placement="top" v-if="item.type === '0'">
                    <span>
                      <span class="icon-bianji icon" @click.stop="editGrouping(item)" v-if="jurisdiction.customer_editGroup" style="cursor: pointer"></span>
                    </span>
              </el-tooltip>

              <el-tooltip class="item" effect="dark" content="删除" placement="top" v-if="item.type === '0'">
                    <span>
                      <span class="icon-delete_icon icon" @click.stop="remove(item.id)" v-if="jurisdiction.customer_deleteGroup" style="cursor: pointer"></span>
                    </span>
              </el-tooltip>

              <el-tooltip class="item" effect="dark" content="隐藏" placement="top">
                    <span v-if="item.type === '1' && type !== 'unbanked'">
                      <span class="icon-Eyeblind icon" @click.stop="isShow(item, 1)" v-if="item.isfile === '0'" style="cursor: pointer"></span>
                      <span class="icon-yulan1 icon" @click.stop="isShow(item, 0)" v-if="item.isfile === '1'" style="cursor: pointer"></span>
                    </span>
              </el-tooltip>


            </div>
          </div>
        </div>
        <ul :ref="'isOpen'+item.id" style="display:block">
          <group :data="item.children" v-if="!toggleShow" :depth="depth + 1"></group>
        </ul>
    </groupItem>

  </div>
</template>

<script>
    import groupItem from './groupItem'
    import { deleteCustType, showCustType, saveCustType, editCustType} from '@/api/customer'
    import {mapGetters} from 'vuex'
    export default {
        name: "group",
        props: {
            data: Array,
            depth:Number,
            type:String
        },
        data() {
            return {
                jurisdiction:{}, // 权限集合
                toggleShow: false,
                groupName: '',
                groupType:'add',
                group_show: false,

            }
        },
        mounted() {
            this.jurisdiction = this.vaildData(this.permission)
        },
        computed: {
            ...mapGetters(["permission"]),
        },
        methods: {
            handleToggleShow(id) {
                // 处理 toggle 状态的是否展开子菜单 handler
                let openItem = this.$refs['isOpen' + id][0]
                if (openItem.style.display == 'block') {
                    openItem.setAttribute('style','display:none')
                } else {
                    openItem.setAttribute('style','display:block')
                }
            },
            addChirlden(pid) { // 添加子分组
                this.$prompt('请输入分组名称', '新增客户分组', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^[\u4e00-\u9fffa-zA-Z0-9]{1,10}$/,
                    inputErrorMessage:"请输入1-10的字符"
                }).then(({ value }) => {
                    saveCustType(value, pid).then(res => {
                        if (res.data.success) {
                            this.$message({
                                type: 'success',
                                message: res.data.msg
                            })
                            // 刷新左侧菜单
                            this.bus.$emit('updataCustMenu')
                            this.bus.$emit('updata')
                        }
                    })
                })
            },
            editGrouping(item) { // 修改分组名称
                this.$prompt('请输入分组名称', '修改客户分组', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^[\u4e00-\u9fffa-zA-Z0-9]{1,10}$/,
                    inputErrorMessage:"请输入1-10的字符",
                    inputValue:item.text
                }).then(({ value }) => {
                    editCustType(value, item.id, item.pid).then(res => {
                        if (res.data.success) {
                            this.$message({
                                type: 'success',
                                message: res.data.msg
                            })
                            // 刷新左侧菜单
                            this.bus.$emit('updataCustMenu')
                            this.bus.$emit('updata')
                        }
                    })
                })
            },
            remove(id) { // 删除
                this.$confirm('删除该分组后，该分组下的所有客户将自动移动到【未分组】', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: "success"
                }).then(() => {
                    deleteCustType(id).then(res => {
                        if(res.data.success) {
                            this.$message({
                                type:'success',
                                message:res.data.msg
                            })
                            this.bus.$emit('updataCustMenu')
                            this.bus.$emit('updata')
                        }
                    })
                })
            },
            handleClose() {
                console.log('关闭')
            },
            isShow(item, type) {
              showCustType(item.id, type).then(res => {
                  if (res.data.success) {
                      this.$message({
                          type: 'success',
                          message: type == 0 ? '客户分组隐藏成功' : '客户分组取消隐藏成功'
                      })
                      // 刷新左侧菜单
                      this.bus.$emit('updataCustMenu')
                      this.bus.$emit('updata')
                  }
              })
            }
        },
        components: {
            groupItem
        },
    };
</script>

<style lang="scss" scoped>
  .list{
    display:flex;
    justify-content: space-between;
    align-items: center;
    /* padding-right 20px; */
    padding: 20px;
    box-sizing: border-box;
    position: relative;
  }
  .list:hover{
    background: #E9F3FD;
  }
  .icon{
    font-size: 19px !important;
    margin: 0 10px;
    line-height: 20px;
  }
  ul {
    list-style: none;
    margin: 10px 0;
  }
  li {
    /*padding-left: 30px;*/
  }
  li:hover {
    background: #E9F3FD;
  }

  .isfrist{
    background-color:#F5F5F5;
    color:#778088;
    border-color:#F5F5F5;
  }
  .rightBtns{
    display:flex;
    align-items: center;
  }
  .title{
    text-align: center;
    color: #409eff;
    font-size: 15px;
    margin-bottom: 20px;
  }
  .flex{
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .iconBtns{
    display:inline-block;
    width:120px;
  }
</style>


